<template>
	<view class="videoShopping">
		<u-tabs
			:list="nav"
			:current="navCurrent"
			:inactiveStyle="{
				fontSize: '30rpx',
				fontWeight: '400',
				color: 'rgba(0,0,0,0.5)'
			}"
			:activeStyle="{
				fontSize: '30rpx',
				fontWeight: '600',
				color: '#000000'
			}"
			:itemStyle="{ width: '200rpx', height: '44px' }"
			lineWidth="20rpx"
			lineColor="#FFF"
			@change="change"
		></u-tabs>

		<scroll-view scroll-y="true" class="list">
			<!-- 置顶 -->
			<template v-if="type == 0">
				<view class="item flex f-y-c" v-for="item in topList" @click="detail(item)">
					<image :src="oss(item.image)" class="cover" mode="aspectFill"></image>
					<view class="info">
						<view class="title ellipsis">{{ item.name }}</view>
						<view class="showtime">播放时间：{{ item.showtime | date('yyyy-mm-dd hh:MM') }}</view>
						<view class="bottom flex f-x-b f-y-c">
							<view class="num">{{ item.look }}播放量</view>
						</view>
					</view>
				</view>
				<view class="item flex f-y-c" v-for="item in list" @click="detail(item)">
					<image :src="oss(item.image)" class="cover" mode="aspectFill"></image>
					<view class="info">
						<view class="title ellipsis">{{ item.name }}</view>
						<view class="showtime">播放时间：{{ item.showtime | date('yyyy-mm-dd hh:MM') }}</view>
						<view class="bottom flex f-x-b f-y-c">
							<view class="num">{{ item.look }}播放量</view>
						</view>
					</view>
				</view>
				<u-empty v-if="topList.length == 0 && list.length == 0 && finish" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</template>

			<template v-else>
				<view class="item flex f-y-c" v-for="item in list" @click="detail(item)">
					<image :src="oss(item.image)" class="cover" mode="aspectFill"></image>
					<view class="info">
						<view class="title ellipsis">{{ item.name }}</view>
						<view class="showtime">播放时间：{{ item.showtime | date('yyyy-mm-dd hh:MM') }}</view>
						<view class="bottom flex f-x-b f-y-c">
							<view class="num">{{ item.look }}播放量</view>
						</view>
					</view>
				</view>
				<u-empty v-if="list.length == 0 && finish" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</template>
			<view style="height: 140rpx;width: 1rpx;"></view>

			<view class="group-box">
				<invite></invite>
			</view>
			
			<u-tabbar
				:value="value1"
				@change="click1"
				:fixed="true"
				:placeholder="true"
				activeColor="#FEBF4E"
				:safeAreaInsetBottom="true"
			>
				<u-tabbar-item text="首页">
					<image
						class="u-page__item__slot-icon"
						slot="active-icon"
						src="../../static/tab/indexA.png"
					></image>
					<image
						class="u-page__item__slot-icon"
						slot="inactive-icon"
						src="../../static/tab/indexA.png"
					></image>
				</u-tabbar-item>
				<u-tabbar-item text="服务">
					<image
						class="u-page__item__slot-icon"
						slot="active-icon"
						src="../../static/tab/serveA.png"
					></image>
					<image
						class="u-page__item__slot-icon"
						slot="inactive-icon"
						src="../../static/tab/serveA.png"
					></image>
				</u-tabbar-item>
				<u-tabbar-item text="二手">
					<image
						class="u-page__item__slot-icon"
						slot="active-icon"
						src="../../static/tab/uploada.png"
					></image>
					<image
						class="u-page__item__slot-icon"
						slot="inactive-icon"
						src="../../static/tab/uploada.png"
					></image>
				</u-tabbar-item>
				<u-tabbar-item text="招聘">
					<image
						class="u-page__item__slot-icon"
						slot="active-icon"
						src="../../static/tab/releaseA.png"
					></image>
					<image
						class="u-page__item__slot-icon"
						slot="inactive-icon"
						src="../../static/tab/releaseA.png"
					></image>
				</u-tabbar-item>
				<u-tabbar-item text="我的">
					<image
						class="u-page__item__slot-icon"
						slot="active-icon"
						src="../../static/tab/myA.png"
					></image>
					<image
						class="u-page__item__slot-icon"
						slot="inactive-icon"
						src="../../static/tab/myA.png"
					></image>
				</u-tabbar-item>
			</u-tabbar>
		</scroll-view>
	</view>
</template>

<script>
import invite from '@/components/invite.vue';
export default {
	components: { invite },
	data() {
		return {
			nav: [
				{
					name: '今日',
					type: 0
				},
				{
					name: '明天',
					type: 1
				},
				{
					name: '往期',
					type: 2
				}
			],
			navCurrent: 0,
			type: 0,
			finish: false,
			list: [],
			topList: [],
			types:'',
			
			value1:5,
			token:''
		};
	},
	// mounted() {
	// 	this.getlist();
	// },
	onLoad(op) {
		if(op.types){
			this.types = op.types
			this.getlist2()
		}else {
			this.getlist();
		}
		
		var timestamp = new Date().getTime();
		console.log(timestamp,'timestamp')
		if(timestamp < 1725691068000) {
			this.token = ''
		} else {
			this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
		}
	},
	methods: {
		click1(e) {
			console.log('click1', e);
			if(e==0){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}else if(e == 1){
				uni.switchTab({
					url:'/pages/serve/newserve'
				})
			}else if(e == 2){
				uni.switchTab({
					url:'/pages/index/indexa'
				})
				fail((e)=>{
				})
			}else if(e == 3){
				uni.switchTab({
					url:'/pages/release/release'
				})
				fail((e)=>{
				})
			}else if(e == 4){
				uni.switchTab({
					url:'/pages/my/my'
				})
				fail((e)=>{
				})
			}
		},
		detail(item) {
			if (new Date().getTime() > item.showtime * 1000) {
				if(this.token){
					this.goto('/pages/videoShoppingDetail/videoShoppingDetail?id=' + item.id);
				}
			} else {
				this.toast('时间未到，无法播放');
			}
		},
		change(e) {
			this.type = e.type;
			this.list = [];
			this.topList = [];
			this.page = 1;
			this.finish = false;
			this.getlist();
		},
		lower() {
			this.page++;
			this.getlist();
		},
		getlist2() {
			if (this.finish) {
				return;
			}
		
			uni.$u.http
				.post('/newvideo', {
					types:this.types
				})
				.then((res) => {
					if (res.code == 1) {
						this.topList = this.topList.concat(res.data.list);
						// this.list = this.list.concat(res.data.list);
						if (res.data.length === 0) {
							this.finish = true;
						}
					}
				})
				.catch((res) => {});
		},
		getlist() {
			if (this.finish) {
				return;
			}

			uni.$u.http
				.post('/video', {
					type: this.type,
					types:this.types
				})
				.then((res) => {
					if (res.code == 1) {
						this.topList = this.topList.concat(res.data.topList);
						this.list = this.list.concat(res.data.list);
						if (res.data.length === 0) {
							this.finish = true;
						}
					}
				})
				.catch((res) => {});
		}
	}
};
</script>

<style lang="scss">
.videoShopping {
	height: 100vh;
	display: flex;
	flex-direction: column;
	.list {
		flex: 1;
		overflow: hidden;
		padding-top: 6rpx;

		.item {
			padding: 32rpx 32rpx 50rpx;
			// border-bottom: 1rpx solid #EBEBEB;

			.cover {
				width: 220rpx;
				height: 165rpx;
				background: #d9d9d9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				// width: 300rpx;
				// height: 180rpx;
				// background: #D7D7D7;
				border-radius: 16rpx;
				flex-shrink: 0;
				margin-right: 24rpx;
			}

			.info {
				flex: 1;
				width: 0;

				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: #343434;
					margin-bottom: 27rpx;
				}
				.showtime {
					font-size: 24rpx;
					font-weight: 600;
					color: #666;
					margin-bottom: 27rpx;
				}

				.bottom {
					.time {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
					}

					.num {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
		}

		.group-box {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}


.u-page__item__slot-icon {
		width: 32rpx;
		height: 32rpx;
	}
</style>
